<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>test</title>

		<link href="../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="bootstrap-table.css" />
		<script src="../jquery-1.10.1.min.js" type="text/javascript"></script>
		<script src="../bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-table.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-table-zh-CN.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('#table').bootstrapTable({
					url: 'data.json',
					locale: 'zh-CN',
					height: $(window).height() - 200,
					contentType: "application/x-www-form-urlencoded",
					striped: true,
					pagination: true,
					singleSelect: false,
					pageSize: 10,
					pageList: [10, 50, 100, 200, 500],
					search: true, //不显示 搜索框
					showColumns: false, //不显示下拉框（选择显示的列）
				});
			});
		</script>

	<body>
		<div>
			<div class="col-md-offset-3 col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title text-center">测试数据</h3>
					</div>
					<div class="panel-body">
						<div id="toolbar" class="btn-group">
							<button id="btn_edit" type="button" class="btn btn-default">
 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
 </button>
							<button id="btn_delete" type="button" class="btn btn-default">
 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
 </button>
						</div>
						<table id="table" >
							<thead>
								<tr>
									<th data-field="id">Item ID</th>
									<th data-field="name">Item Name</th>
									<th data-field="price">Item Price</th>
								</tr>
							</thead>
						</table>
					</div>
	</body>

</html>